<template>
  <div class="page-warp">
    <!-- <pk-header></pk-header> -->
    <div class="page-layout">
      <div class="page-layout-conent">
        <div class="page-layout-header pt-24">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/interview' }">{{
              detailData.job_name
            }}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: getToPath() }"
              >候选人明细</el-breadcrumb-item
            >
            <el-breadcrumb-item
              >面试评语:
              {{ detailData?.candidate_name || "--" }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <div class="page-layout-video" v-if="detailData?.video_list?.length > 0">
          <div
            class="page-layout-videoitem"
            v-for="(item, index) in detailData?.video_list"
            :key="index"
          >
            <video
              :src="item.video_link"
              controlsList="nodownload"
              controls
              width="300"
              height="200"
              style="object-fit:fill"
            ></video>
          </div>
        </div>
        <div class="page-layout-userinfo mt-12">
          <div class="page-layout-userinfoinfo">
            <el-row :gutter="30">
              <el-col :span="8">
                <div class="mb-8">面试时间: {{ detailData?.interTime }}</div>
              </el-col>
              <el-col :span="8">
                <div class="mb-8 flex-row">
                  简历附件：
                  <span
                    class="color-blur flex-row align-items-center"
                    @click="showRemark"
                    >点击预览
                    <span class="mr-8" style="height: 14px; overflow: hidden"
                      ><el-icon size="14"><Right /></el-icon></span
                  ></span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="30" v-if="detailData?.report">
              <el-col :span="8">
                <div class="mb-8">
                  姓名：{{ detailData?.report?.fullname || "--" }}
                </div>
              </el-col>
              <el-col :span="8">
                <div class="mb-8">
                  性别：{{ detailData?.report?.gender || "--" }}
                </div>
              </el-col>
              <el-col :span="8">
                <div class="mb-8">
                  年龄：{{ detailData?.report?.age || "--" }}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="30" v-if="detailData?.report">
              <el-col :span="8">
                <div class="mb-8">
                  民族：{{ detailData?.report?.nation || "--" }}
                </div>
              </el-col>
              <el-col :span="8">
                <div class="mb-8">
                  籍贯：{{ detailData?.report?.native_place || "--" }}
                </div>
              </el-col>
              <el-col :span="8">
                <div class="mb-8">
                  现居：{{ detailData?.report?.living_in || "--" }}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="30" v-if="detailData?.report">
              <el-col :span="8">
                <div class="mb-8">
                  工龄：<span v-if="detailData?.report?.jobyear"
                    >{{ detailData?.report?.jobyear }}年</span
                  ><span v-else>--</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="mb-8">
                  学历：{{ detailData?.report?.degree || "--" }}
                </div>
              </el-col>
              <el-col :span="8">
                <div class="mb-8">
                  专业：{{ detailData?.report?.major || "--" }}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="30" v-if="detailData?.report">
              <el-col :span="24">
                <div class="mb-8">
                  毕业院校：{{ detailData?.report?.graduate_school || "--" }}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="30" v-if="detailData?.report">
              <el-col :span="24">
                <div class="mb-8 flex-row align-items-center">
                  推荐指数:
                  <div class="ml-8" v-if="show">
                    <el-rate
                      v-model="detailData.report.recommendation"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="page-layout-matched" v-if="detailData?.report">
            <el-progress
              type="dashboard"
              v-if="show"
              :percentage="detailData.report.match_score"
              stroke-width="14"
              width="200"
            >
              <template #default="{ percentage }">
                <div
                  class="percentage-value flex-row justify-center align-items-center"
                >
                  <div class="f-40">{{ percentage }}</div>
                </div>
                <div class="percentage-label f-12 mt-8">匹配度得分</div>
              </template>
            </el-progress>
          </div>
        </div>
        <div class="page-layout-cell mt-12" v-if="detailData?.report">
          <div class="page-layout-cellhd">简历判断:</div>
          <div class="page-layout-cellbd mt-12">
            {{ detailData.report?.resume_comment || '--' }}
          </div>
        </div>
        <div class="page-layout-cell mt-12" v-if="detailData?.report">
          <div class="page-layout-cellhd">面试评语:</div>
          <div class="page-layout-cellbd mt-8">
            {{ detailData.report?.comment }}
          </div>
        </div>
        <div class="page-layout-cell mt-12" v-if="detailData?.report">
          <div class="page-layout-cellhd">能力图谱:</div>
          <div class="page-layout-cellbd mt-8">
            <tags-component
              :tags="detailData.report.tags"
              v-if="show"
            ></tags-component>
          </div>
        </div>


        <div class="page-layout-cell mt-12" v-if="detailData?.report && detailData?.report?.questions && detailData?.report?.questions.length > 0">
          <div class="page-layout-cellhd">优先提问:</div>
          <div class="page-layout-cellbd mt-8">
            <div class="mt-8" v-for="(item,index) in detailData?.report?.questions" :key="index">
              <div class="bold">问题{{index+1}}</div>
              <div class="mt-4 f-14">面试官：{{item.question}}</div>
              <div class="mt-4 f-14">候选人：{{item.answer}}</div>
            </div>
          </div>
        </div> 

        <div class="page-layout-canvas mt-12" v-if="detailData?.report">
          <div><el-divider /></div>
          <canvas-component
            :data="detailData.report.canvas"
            v-if="show"
            title="核心竞争力"
            :desc="detailData.report.competitive_power_desc"
          >
            <radar-component :options="poverOptions" />
          </canvas-component>
          <div><el-divider /></div>
          <canvas-component
            :data="detailData.report.canvas"
            v-if="show"
            title="霍兰德职业兴趣"
            :desc="detailData.report.holland_occupational_themes_desc"
            direction="right"
          >
            <radar-component :options="hollandOptions" />
          </canvas-component>
          <div><el-divider /></div>
          <canvas-component
            :data="detailData.report.canvas"
            v-if="show"
            title="大五人格特征"
            :desc="detailData.report.big_five_personality_traits_desc"
          >
            <radar-component :options="fiveOptions" />
          </canvas-component>
          <div><el-divider /></div>
          <canvas-component
            :data="detailData.report.canvas"
            v-if="show"
            title="MBTI人格类型指标"
            :desc="detailData.report.myers_briggs_type_indicator_desc"
            direction="right"
          >
            <mbti-component :data="detailData.report"></mbti-component>
          </canvas-component>
          <div><el-divider /></div>
          <canvas-component
            :data="detailData.report.canvas"
            v-if="show"
            title="人格特征九宫格"
            :desc="detailData.report.nine_personality_types_desc"
          >
            <bigfive-component :data="detailData.report"></bigfive-component>
          </canvas-component>
          <div><el-divider /></div>
          <canvas-component
            :data="detailData.report.canvas"
            v-if="show"
            title="DISC行位模型"
            :desc="detailData.report.disc_behavioral_assessment_desc"
            direction="right"
          >
            <disc-component :data="detailData.report"></disc-component>
          </canvas-component>
        </div>
        <div class="page-layout-full" v-if="!detailData?.report">
          报告生成中...
        </div>
      </div>
    </div>
    <pk-dialog v-if="showReme" style="width: 600px">
      <img :src="detailData?.attachment?.source_link" width="100%" />
    </pk-dialog>
  </div>
</template>

<script setup>
import { Right, ArrowRight } from "@element-plus/icons-vue";
import { getReport } from "@/api/api";
import { useRoute } from "vue-router";
import { onMounted, ref, reactive, computed } from "vue";
// import pkHeader from '@/components/header/header.vue'
import TagsComponent from "./component/tag.vue";
import CanvasComponent from "./component/canvas.vue";
import radarComponent from "./component/radar.vue";
import mbtiComponent from "./component/mbti.vue";
import bigfiveComponent from "./component/bigfive.vue";
import discComponent from "./component/disc.vue";
import pkDialog from "@/components/pkui/pkdialog/pkdialog.vue";
import {
  calculatePercentage,
  getDynamicValues,
  getAge,
  getTime,
} from "@/utils/utils";
const route = useRoute();
const detailData = ref({});
const percentage = ref(80);
const show = ref(false);
const desc = ref(
  "候选人专业基础扎实，技能与岗位要求匹配度高，具备良好的实操能力和项目经验。教育背景优秀，学习能力突出。职业规划清晰，与公司发展方向契合。沟通表达流畅，逻辑思维严谨，团队协作意识强。综合表现优异，建议录用。"
);
const poverOptions = ref({});
const hollandOptions = ref({});
const fiveOptions = ref({});
const showReme = ref(false);
const getFiveOptions = () => {
  fiveOptions.value = {
    radar: {
      indicator: detailData.value.report.big_five_personality_traits.map(
        (item) => {
          return {
            name: item.name,
            max: 100,
          };
        }
      ),
    },
    legend: {
      data: ["岗位要求", "候选人得分"],
    },
    series: [
      {
        name: "",
        type: "radar",
        data: [
          {
            value: detailData.value.report?.big_five_personality_traits.map(
              (item) => item.cutoff
            ),
            name: "岗位要求",
            lineStyle: {
              color: "#ddd",
              type: "dashed",
            },
            // 圆点样式配置
            symbol: "circle", // 圆点形状，可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 等
            symbolSize: 8, // 圆点大小
            itemStyle: {
              color: "#ddd", // 圆点颜色
            },
          },
          {
            value: detailData.value.report.big_five_personality_traits.map(
              (item) => item.score
            ),
            name: "候选人得分",
            lineStyle: {
              color: "#4bc0c0",
            },
            symbol: "circle", // 圆点形状，可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 等
            symbolSize: 8, // 圆点大小
            itemStyle: {
              color: "#4bc0c0", // 圆点颜色
            },
            areaStyle: { opacity: 0.2, color: "#4bc0c0" },
          },
        ],
      },
    ],
  };
};
const getHollandoccupational = () => {
  hollandOptions.value = {
    radar: {
      indicator: detailData.value.report.holland_occupational_themes.map(
        (item) => {
          return {
            name: item.name,
            max: 100,
          };
        }
      ),
    },
    legend: {
      data: ["岗位要求", "候选人得分"],
    },
    series: [
      {
        name: "",
        type: "radar",
        data: [
          {
            value: detailData.value.report.holland_occupational_themes.map(
              (item) => item.cutoff
            ),
            name: "岗位要求",
            lineStyle: {
              color: "#ddd",
              type: "dashed",
            },
            // 圆点样式配置
            symbol: "circle", // 圆点形状，可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 等
            symbolSize: 8, // 圆点大小
            itemStyle: {
              color: "#ddd", // 圆点颜色
            },
          },
          {
            value: detailData.value.report.holland_occupational_themes.map(
              (item) => item.score
            ),
            name: "候选人得分",
            lineStyle: {
              color: "#ff6384",
            },
            symbol: "circle", // 圆点形状，可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 等
            symbolSize: 8, // 圆点大小
            itemStyle: {
              color: "#ff6384", // 圆点颜色
            },
            areaStyle: { opacity: 0.2, color: "#ff6384" },
          },
        ],
      },
    ],
  };
};
const getPover = () => {
  poverOptions.value = {
    radar: {
      indicator: detailData.value.report.competitive_power.map((item) => {
        return {
          name: item.name,
          max: 100,
        };
      }),
    },
    legend: {
      data: ["岗位要求", "候选人得分"],
    },
    series: [
      {
        name: "",
        type: "radar",
        data: [
          {
            value: detailData.value.report.competitive_power.map(
              (item) => item.cutoff
            ),
            name: "岗位要求",
            lineStyle: {
              color: "#ddd",
              type: "dashed",
            },
            // 圆点样式配置
            symbol: "circle", // 圆点形状，可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 等
            symbolSize: 8, // 圆点大小
            itemStyle: {
              color: "#ddd", // 圆点颜色
            },
          },
          {
            value: detailData.value.report.competitive_power.map(
              (item) => item.score
            ),
            name: "候选人得分",
            lineStyle: {
              color: "#06c",
            },
            symbol: "circle", // 圆点形状，可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 等
            symbolSize: 8, // 圆点大小
            itemStyle: {
              color: "#06c", // 圆点颜色
            },
            areaStyle: { opacity: 0.2, color: "#06c" },
          },
        ],
      },
    ],
  };
};
// 点击浏览
const showRemark = () => {
  debugger;
  if (detailData.value?.attachment?.extension == "pdf") {
    window.open(detailData.value?.attachment?.source_link, "_blank");
  } else {
    showReme.value = true;
  }
};
const getInit = () => {
  const { params } = route;
  getReport({
    interview_id: params.id,
  }).then((res) => {
    let year = new Date().getFullYear();
    detailData.value = {
      ...res.data,
      interTime: res.data?.video_list.length > 0 ? getTime(res.data?.video_list[0].created_at, "time") : '',
    };
    if (res.data.report) {
      detailData.value = {
        ...res.data,
        // questions: [
        //  {
        //   question:"你能接受加班嘛?",
        //   answer:'看公司需要吧'
        //  },
        //  {
        //   question:"你能接受加班嘛?",
        //   answer:'看公司需要吧'
        //  },
        //  {
        //   question:"你能接受加班嘛?",
        //   answer:'看公司需要吧'
        //  },
        //  {
        //   question:"你能接受加班嘛?",
        //   answer:'看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧看公司需要吧'
        //  }
        // ],
        interTime: res.data?.video_list.length > 0 ? getTime(res.data?.video_list[0].created_at, "time") : '',
        report: {
          ...res.data.report,
          jobyear: res.data?.report.date_of_initial_employment
            ? year - res.data.report.date_of_initial_employment
            : "",
          age: res.data.report.birthday ? getAge(res.data.report.birthday) : "",
          myers_briggs_type_indicator:
            res.data.report.myers_briggs_type_indicator.map((item) => {
              let names = item.name.split("-");
              let value = getDynamicValues(item.name);
              let dic = calculatePercentage(item.score);
              return {
                ...item,
                dic: dic,
                value: dic > 50 ? value[1] : value[0],
                names,
              };
            }),
        },
      };

      getPover();
      getHollandoccupational();
      getFiveOptions();
    }

    show.value = true;
  });
};

const getToPath = () => {
  return `/candidatedetails/${detailData.value.job_name}/${detailData.value.job_id}`;
};
onMounted(() => {
  getInit();
});
</script>

<style lang="scss" scoped>
.page-layout {
  background: #fff;
  font-size: 14px;
  min-height: 100%;
  padding-bottom: 60px;
  padding-top: 50px;
  display: flex;
  &-conent {
    width: 996px;
    margin: 0 auto;
    overflow: hidden;
  }
  &-video {
    height: 220px;
    margin-top: 24px;
    overflow: hidden;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
  }

  &-videoitem {
    flex: 0 0 auto; /* 不伸缩，固定宽度 */
    width: 300px;
    height: 200px;
    margin-right: 12px;
    border: #ddd 1px solid;
    display: inline-block;
  }
  &-cell {
    // width: 994px;
    // overflow: hidden;
    // border: #000 1px solid;
  }

  &-cellhd{
    border-bottom: #dcdfe6 1px solid;
    padding-bottom: 12px;
  }
  &-userinfo {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  &-canvas {
  }
  &-userinfoinfo {
    flex: 1;
  }
  &-fullbox {
    width: 100%;
  }
  &-full {
    font-size: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 1000px;
    width: 988px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 996px) {
  .page-layout {
    // overflow-x:hidden;
    &-conent {
      width: 90%;
      margin: 0 auto;
    }
    &-userinfo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    &-userinfoinfo {
      width: 100%;
    }
    &-matched {
      margin: 40px auto;
    }
  }
}
</style>
